<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <btn-a>
      </btn-a>
      <btn-b>
      </btn-b>
    </div>
    <script src="./vue.js"></script>
    <script>
       const hub=new Vue()
      Vue.component("btn-a", {
        template: `<div><div>A的值：{{num}}</div>
         <button @click=change>改变B</button></div>`,
        data() {
          return {
            num:0
          };
        },
        methods:{
          change(){
            hub.$emit("change-b",2)
          }
        },
        mounted(){
          hub.$on("change-a",(e)=>this.num+=e)
        }

      });
      Vue.component("btn-b", {
        template: `<div><div>B的值：{{num}}</div>
         <button @click=change>改变A</button></div>`,
        data() {
          return {
            num:0
          };
        },
        methods:{
          change(){
            hub.$emit("change-a",1)
          }
        },
        mounted(){
          hub.$on("change-b",(e)=>this.num+=e)
        }

      });
      const vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
      });
    </script>
  </body>
</html>
